<template>
	<view class="tbody" v-if="res">
		<!-- 文章标题 -->
		<view class="article">
			{{res.title }}
		</view>
		<!-- 发布人发布时间 -->
		<view class="issue">
			<view class="issue-person">
				发布：{{res.createName }}
			</view>
			<view class="issue-time">
				时间：{{res.publishTime }}
			</view>
		</view>
		<!-- 图片 -->
		<!-- <image :src="ip + res.coverImage" style="width: 100%; height: 420rpx;" mode=""></image> -->
		<!-- 活动介绍 -->
		<view class="text">
			<view class="headline">
				活动介绍
			</view>
			<view class="content">
				<rich-text style="word-wrap:break-word; word-break:break-all;" :nodes="res.introduce"></rich-text>
			</view>
		</view>

		<!-- 活动详情 -->
		<view class="text">
			<view class="headline">
				活动详情
			</view>
			<view class="content">
				<rich-text style="word-wrap:break-word; word-break:break-all;" :nodes="res.particulars"></rich-text>

			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isUpload:'',//N是没有送审，Y是送审了
				id: 1,
				key: uni.getStorageSync('roleKey'),
				isShow: true, //控制申请未申请的展示
				succeed: true, //控制申请成功显示的图片
				res: '',
				ip: this.$store.state.user.URL,
				a: '大范甘迪个地方官',
				// 申请人列表
				// userInfo: [{
				// 	applyTime: "",
				// 	avatar: "",
				// 	status: "",
				// 	uid: '',
				// 	uname: "",
				// 	userActiveId: '' //驳回还是同意，传这个就行了
				// }]
			};
		},
		computed: {

			// 判断是不是管理员，是管理员就返回一个true，不是就返回一个false
			keybl() {
				if (this.key === 'manager') {
					return true
				} else {
					return false
				}
			}
		},
		onLoad(options) {
			this.id = options.id
		},
		onShow() {
			this.xuanran(this.id)
			this.inquire(this.id)
		},
		methods: {
			//跳转去查看详情
			tiaoz(){
				uni.navigateTo({
					url: `/pages/submitsubmit/submitsubmit?id=${this.id}`,
					
				})
			},
			// 跳转去上传活动经历
			// skip(){
			// 	uni.navigateTo({
			// 		url: `/pages/experience/experience?id=${this.res.id}`,
			// 	})
			// },
			// 查询用户有没有送审记录
			async inquire(id){
			 const res = await uni.$http.get('/business/active/user/' + id)
			 this.isUpload = res.data.data.isUpload
			},
			async xuanran(id) {
				await uni.$http.get('/business/content/' + id).then((res => {
					// 用正则替换所有img标签
					res.data.data.particulars = res.data.data.particulars.replace(/src="/g,
						"style=\"width: 100%; height: 420rpx;\" src=\"" + this.ip);
					res.data.data.particulars = res.data.data.particulars.replace(/<\/p><p><img/g, '<img');
					res.data.data.introduce = res.data.data.introduce.replace(/src="/g,
						"style=\"width: 100%; height: 420rpx;\" src=\"" + this.ip);
					res.data.data.introduce = res.data.data.introduce.replace(/<\/p><p><img/g, '<img');
					res.data.data.introduce = res.data.data.introduce.replace(
						/<span\s+style=(['"])(.*?)\1/gi,
						"<span style='display:block;text-indent: 2em; $2'");
					this.res = res.data.data
					const Str = this.res.activeState
					if (Str === '0') {
						this.isShow = true
					} else {
						this.isShow = false
					}
				}))
				const res = await uni.$http.get(`/business/active/joinActiveUsers/${id}`)
				// this.userInfo = res.data.data
			},
		}
	}
</script>

<style lang="scss" scoped>
	.tbody {
		min-height: 100vh;
		padding: 80rpx 0 100rpx 0;
		background-color: #fff !important;
	}

	.article {
		font-size: 32rpx;
		font-weight: 700;
		color: rgba(20, 58, 64, 1);
		text-align: center;
		margin-bottom: 42rpx;
	}

	.proposer {
		box-sizing: border-box;
		padding: 0 32rpx;
		margin-top: 100rpx;

		.proposer-ger {
			margin-top: 50rpx;
			box-sizing: border-box;
			height: 144rpx;
			opacity: 1;
			border-radius: 20rpx;
			background: rgba(245, 253, 255, 1);
			box-shadow: 0px 0px 4rpx 0px rgba(22, 193, 219, 0.4);
			margin-bottom: 24rpx;
			padding: 32rpx;
			display: flex;
			justify-content: space-between;

			.left {
				display: flex;
				justify-content: space-between;

				.answer-left-one {
					font-size: 32rpx;
					font-weight: 400;
					letter-spacing: 0px;
					line-height: 32rpx;
					color: rgba(20, 58, 64, 1);
					text-align: left;
					vertical-align: top;
					margin-bottom: 26rpx;
				}

				.answer-left-two {
					opacity: 0.3;
					font-size: 24rpx;
					font-weight: 400;
					line-height: 24rpx;
					color: rgba(20, 58, 64, 1);
					text-align: left;
					vertical-align: top;
				}
			}

			.right {
				display: flex;
				justify-content: space-between;
				margin-top: 20rpx;
			}

			.right-one {
				margin-right: 32rpx;
				width: 128rpx;
				height: 48rpx;
				opacity: 1;
				border-radius: 60rpx;
				border: 1px solid rgba(255, 120, 89, 1);
				font-size: 24rpx;
				font-weight: 400;
				line-height: 48rpx;
				color: rgba(255, 120, 89, 1);
				text-align: center;
			}

			.right-two {
				width: 128rpx;
				height: 48rpx;
				opacity: 1;
				border-radius: 60rpx;
				border: 1px solid rgba(67, 207, 124, 1);
				font-size: 24rpx;
				font-weight: 400;
				line-height: 48rpx;
				color: rgba(67, 207, 124, 1);
				text-align: center;
			}

		}
	}

	.issue {
		display: flex;
		justify-content: center;
		font-size: 20rpx;
		font-weight: 400;
		color: rgba(20, 58, 64, 1);
		margin-bottom: 60rpx;

		.issue-person {
			margin-right: 43rpx;
		}

		.issue-time {}
	}

	.text {
		padding: 0 30rpx 0 34rpx;

		.headline {
			font-size: 32rpx;
			font-weight: 700;
			line-height: 1;
			color: rgba(20, 58, 64, 1);
			margin-top: 48rpx;
			margin-bottom: 24rpx;

		}

	}

	.apply-for {
		width: 680rpx;
		height: 88rpx;
		opacity: 1;
		border-radius: 60rpx;
		background: rgba(22, 193, 219, 1);
		margin-left: 32rpx;
		line-height: 88rpx;
		text-align: center;
		margin-top: 140rpx;
		font-size: 16px;
		font-weight: 400;
		color: rgba(235, 252, 255, 1);

	}

	.hs {
		background-color: #bcd3d6 !important;
	}

	.isShow {
		position: relative;

		.op {
			position: absolute;
			top: -912rpx;
			left: 88rpx;
			width: 512rpx;
			height: 288rpx;
			border-radius: 20rpx;
			background: #000000;
			opacity: 0.7;
			padding-top: 38rpx;

			image {
				width: 64px;
				height: 64px;
			}

			view {
				font-size: 32rpx;
				font-weight: 400;
				color: rgba(235, 252, 255, 1);
				line-height: 1;
			}
		}
	}
</style>
